<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 1. 页面的元素
                1.1 点击加的时候，如果没有超过库存的情况下，数字加1
                1.2 点击减的时候，如果没有小于0，数字减1
                1.3 不符合条件的时候，提示
        -->
        <!-- 3. 添加加的注册事件 -->
        <button @click.stop="handleAdd(1)">+</button>
        <!-- 2.1 通过模板语法，获取data中的num值 -->
        <span>{{num}}</span>
        <button @click.stop="handleSub(-1)">-</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                /* 2. 定义一个数字，变化的数字 */
                num:0,
                // 3.2 库存的数字，一般是从后台请求来的
                stock:5
            },
            methods: {
                // 3.1 加的方法的实现
                handleAdd:function(step){
                    if(this.num+step<=this.stock)
                        this.num+=step;// 加1 
                    else
                        alert("已经超过库存了");
                },
                handleSub:function(step){
                    // step -1
                    if(this.num+step>=0){
                        this.num+=step;
                    }else{
                        alert("已经不能再减少了");
                    }
                }
            },
        })
    </script>
</body>
</html>